<template>
  <div class="home-page">
    <div class="home-page-title">在线开放课程与学期</div>
    <div class="create-btn">
      <el-button @click="addNewCurriculum">新建课程</el-button>
    </div>
    <div
      class="add-new-curriculum"
      :class="{'add-new-curriculum-active':isNewCurriculum }"
    >
      <new-curriculum-form
        @handleSubmit="handleSubmit"
        @handleCancel="handleCancel"
      ></new-curriculum-form>
    </div>
    <div
      class="curriculum-list infinite-list"
      v-infinite-scroll="loadMore"
      style="overflow:auto"
    >
      <div
        class="curriculum-item"
        v-for="item in dataList"
        :key="item.id"
      >
        <div
          class="curriculum-header"
          :class="{'curriculum-header-active':item.edit}"
        >
          <div>
            <span class="header-title">网店开设与运营网店开设与运营网店开设与运营网店开设与运营</span>
            <span class="header-sub">面向本校师生面向本校师生面向本校师生（苏州经贸大学）</span>
          </div>
          <div class="header-cooper-list">
            <span
              class="look-btn"
              @click="addNewSemester"
            >
              <i class="el-icon-delete"></i> 添加学期
            </span>
            <span
              class="edit-btn"
              @click="editCurriculum(item)"
            ><i class="el-icon-delete"></i> 编辑</span>
            <span
              class="delete-btn"
              @click="handleDelete('1')"
            ><i class="el-icon-delete"></i> 删除</span>
          </div>
        </div>
        <div
          class="curriculum-header-edit"
          :class="{'curriculum-header-edit-active':item.edit}"
        >
          <new-curriculum-form
            @handleSubmit="handleSubmit"
            @handleCancel="handleCancel"
          ></new-curriculum-form>
        </div>
        <div>
          <el-table
            :show-header="false"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              prop="date"
              label="日期"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
              width="240"
            >
            </el-table-column>
            <el-table-column
              align="right"
              label=""
            >
              <el-button
                plain
                size="small"
                type="success"
                class="btn-form-cancel"
              >查看学习页面</el-button>
              <el-button
                plain
                size="small"
                type="warning"
                class="btn-form-submit"
              >编辑内容</el-button>
              <el-button
                size="small"
                icon="el-icon-delete"
                class="btn-form-submit no-border delete-btn"
                @click="handleDelete('2')"
              >删除</el-button>
              <!-- <span><i class="el-icon-delete"></i> 删除</span> -->
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import NewCurriculumForm from './components/NewCurriculumForm.vue';

export default {
  name: 'homepage',
  components: {
    NewCurriculumForm,
  },
  data() {
    return {
      isNewCurriculum: false,
      tableData: [
        {
          date: '第一学期',
          name: '王立峰',
          state: '已结束',
          address: '2018年05月01日~2018年12月30日',
        },
        {
          date: '第二学期',
          name: '王小虎',
          state: '开课中',
          address: '2018年05月01日~2018年12月30日',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          state: '1',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          state: '1',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      dataList: [
        {
          id: 1,
          edit: false,
        },
        {
          id: 2,
          edit: false,
        },
        {
          id: 3,
          edit: false,
        },
        {
          id: 4,
          edit: false,
        },
      ],
    };
  },
  methods: {
    // 新建课程
    addNewCurriculum() {
      this.isNewCurriculum = !this.isNewCurriculum;
    },
    // 编辑课程
    editCurriculum() {
      this.dataList[0].edit = !this.dataList[0].edit;
      // 新增去掉
      this.isNewCurriculum = false;
    },
    // 无限滚动
    loadMore() {
      this.dataList = this.dataList.concat([
        {
          id: 11,
          edit: false,
        },
        {
          id: 21,
          edit: false,
        },
        {
          id: 31,
          edit: false,
        },
        {
          id: 41,
          edit: false,
        },
      ]);
    },
    // 课程新增编辑
    handleSubmit(obj) {
      this.xxx.xxx = obj.xxx;
      this.$set(this.xxx, 'xxx', obj.xxx);
    },
    // 删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: `删除id=${id}成功!`,
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    // 取消编辑
    handleCancel() {
      this.dataList[0].edit = !this.dataList[0].edit;
    },
    // 新增学期
    addNewSemester() {
      this.$confirm('此操作将创建新的学期, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '创建新的学期!',
          });
          this.$router.push('/courseManagement/detail');
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消创建新的学期',
          });
        });
    },
  },
};
</script>

<style  lang="scss" scoped>
.home-page {
  width: 1000px;
  margin: 0 auto;
  .home-page-title {
    font-size: 16px;
    font-weight: bold;
    color: rgba(10, 18, 26, 1);
    margin-top: 34px;
  }
  .create-btn {
    margin-top: 8px;
    margin-bottom: 28px;
    button {
      background: #35cc67;
      color: #ffffff;
      font-size: 14px;
      width: 120px;
      height: 40px;
    }
    button:hover {
      border-color: #35cc67;
    }
  }
  .add-new-curriculum {
    width: 100%;
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s;
    border: 1px solid transparent;
  }
  .add-new-curriculum-active {
    opacity: 1;
    height: 100px;
    border: 1px solid #ff783c;
    margin-bottom: 28px;
  }
  .curriculum-list {
    box-sizing: border-box;
    border-radius: 6px;
    max-height: 1000px;
    .curriculum-item {
      background: #ffffff;
      padding: 20px;
      border-radius: 6px;
      margin-bottom: 20px;
      .curriculum-header {
        height: 50px;
        overflow: hidden;
        background: #f7f8fa;
        border: 1px solid #ebeff2;
        opacity: 1;
        transition: all 0.3s;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-title {
          font-size: 16px;
          font-weight: bold;
          color: #4c5258;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .header-title,
        .header-sub {
          display: inline-block;
          max-width: 260px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .header-sub {
          margin-left: 20px;
          font-size: 12px;
          color: #8a9199;
        }
        .header-cooper-list {
          font-size: 12px;
          & > span {
            color: #8a9199;
            cursor: pointer;
            margin-left: 20px;
            font-weight: 400;
            i {
              margin-right: 2px;
            }
          }
        }
      }
      .curriculum-header-active {
        height: 0;
        opacity: 0;
      }
      .curriculum-header-edit {
        overflow: hidden;
        opacity: 0;
        height: 0;
        transition: all 0.3s;

        border: 1px solid #ebeff2;
        border-radius: 6px;
      }
      .curriculum-header-edit-active {
        opacity: 1;
        height: 100px;
      }
    }
  }
  .el-button--success.is-plain {
    background: #ffffff;
  }
  .el-button--success.is-plain:hover {
    background: #13ce66;
  }
  .el-button--warning.is-plain {
    background: #ffffff;
  }
  .el-button--warning.is-plain:hover {
    background: #ffba00;
  }
  .no-border {
    border-color: transparent;
    padding-right: 10px;
    color: #8a9199;
    background: transparent;
  }
  .no-border:hover {
    background: transparent;
  }
  .delete-btn:hover {
    color: #f56c6c !important;
  }
  .edit-btn:hover {
    color: #ffba00 !important;
  }
  .look-btn:hover {
    color: #13ce66 !important;
  }
}
.curriculum-list::-webkit-scrollbar {
  display: none;
}
</style>
